import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../common/routes.dart';
import '../controllers/cartoon_app_bar_controller.dart';
import '../utils/screen_util.dart';

class CartoonAppBar extends StatelessWidget {
  const CartoonAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    var screenWidth = ScreenUtil.getScreenWidth(context);
    //print("screen width = $screenWidth");
    if (screenWidth == 0) {
      return const SizedBox.shrink();
    }
    return GetBuilder<CartoonAppBarController>(
      init: CartoonAppBarController(),
      builder: (controller) {
        return SizedBox(
          width: double.infinity,
          child: Stack(
            children: [
              GestureDetector(
                child: AnimatedContainer(
                  width: controller.inputViewWidth,
                  curve: Curves.fastOutSlowIn,
                  duration: const Duration(milliseconds: 300),
                  decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: const Align(
                    alignment: Alignment.centerLeft,
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
                      child: Text('搜索内容/角色', style: TextStyle(fontSize: 16, color: Colors.black38)),
                    ),
                  ),
                ),
                onTap: () {
                  Get.toNamed(Routes.SEARCH);
                },
              ),
              _buildAnimatedBlocks(),
              if (controller.isReset)
                Positioned(
                  left: Get.width - 46,
                  top: 8,
                  child: Icon(
                    size: 20,
                    Icons.arrow_forward_ios,
                    color: Colors.grey[350],
                  ),
                ),
            ],
          ),
        );
      },
    );
  }

  Widget _buildAnimatedBlocks() {
    final controller = Get.find<CartoonAppBarController>();
    return GestureDetector(
      child: SizedBox(
        width: double.infinity,
        height: 40,
        child: Stack(
          children: List.generate(controller.imageUrls.length, (index) {
            return Positioned(
              left: Get.width - 196 + index * (40 - 6),
              top: 0,
              child: AnimatedContainer(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white, width: 1.5),
                  borderRadius: BorderRadius.circular(8),
                ),
                transform: Matrix4.identity().scaled(controller.scales[index], controller.scales[index]),
                transformAlignment: Alignment.bottomLeft,
                duration: const Duration(milliseconds: 200),
                margin: EdgeInsets.only(left: controller.xPositions[index], top: controller.yPositions[index]),
                width: 40,
                height: 40,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(7),
                  child: CachedNetworkImage(
                    height: 40,
                    width: 40,
                    fadeInDuration: const Duration(seconds: 0),
                    fadeOutDuration: const Duration(seconds: 0),
                    fit: BoxFit.cover,
                    imageUrl: controller.imageUrls[index],
                  ),
                ),
              ),
            );
          }),
        ),
      ),
      onTap: () {
        Get.toNamed(Routes.FOLLOWING);
      },
    );
  }
}
